<template>
  <transition name="box" appear>
    <!--banner轮播-->
    <div class="box" v-show="show">
      <div class="swiper-container" ref="mySwiper1">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(carousel, index) in imgList"
            :key="index"
          >
            <img :src="require('./images/' + carousel + '.jpg')" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>

      <div class="swiper-container" ref="mySwiper2">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(carousel, index) in videoList"
            :key="index"
          >
            <video
              :src="require('./videos/' + carousel + '.mp4')"
              controls
              muted="muted"
            ></video>
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
    </div>
  </transition>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      imgList: ["1", "2", "3", "4"],
      videoList: ["1", "2", "3","4"],
      show: false,
    };
  },
  mounted() {
    setTimeout(() => {
      this.show = true;
    }, 1200);
  },
  watch: {
    show: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          var mySwiper1 = new Swiper(this.$refs.mySwiper1, {
            loop: true,
            autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
            },
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
          var mySwiper2 = new Swiper(this.$refs.mySwiper2, {
            loop: true,
            paginationClickable: true,
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
          });
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
.swiper-container {
  margin-top: 20px;
  width: 90vw;
  img {
    width: 100%;
  }
  video {
    width: 100%;
  }
  border-radius: 30px;
  box-shadow: black 5px 5px 5px;
}
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
video {
  margin-top: 20px;
  width: 80%;
  border-radius: 30px;
  box-shadow: gray 5px 5px 5px;
}
.box-enter {
  transform: scale(0);
}
.box-enter-to {
  transform: scale(1);
}
.box-enter-active {
  transition: all 0.8s ease;
}
</style>